﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>系统首页</title>
    <link rel="icon" href="favicon.ico" type="image/ico">


    <meta name="author" content="yinqi">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    </script>
</head>

<body data-logobg="color_8" data-sidebarbg="color_8">
<div class="layout-web">
    <div class="layout-container">
        <!--左侧导航-->
        <aside class="layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="/homePage"><img src="static/images/logo-sidebar.png" title="" alt=""/></a>
            </div>
            <div class="layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"><a href="/homePage"><i class="mdi mdi-home"></i> 后台首页</a></li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-webhook"></i>各学院就业情况</a>
                            <ul class="nav nav-subnav">
                                <li><a href="/docM">数学与统计学院</a></li>
                                <li><a href="/docW">物理学院</a></li>
                                <li><a href="/docE">外国语学院</a></li>
                                <li><a href="/docH">汉语言学院</a></li>
                                <li><a href="/docJ">经济与管理学院</a></li>
                                <li><a href="/docHg">化工学院</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-account-multiple-outline"></i> 角色管理</a>
                            <ul class="nav nav-subnav">
                                <li><a href="/uiOther">校企合作企业</a></li>
                                <li><a href="/uiCards">修改校企合作企业</a></li>
                                <li><a href="/confirm">删除角色</a></li>
                                <li><a href="/ag">提升管理员</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-bus-side"></i> 毕业方向管理</a>
                            <ul class="nav nav-subnav">
                                <li><a href="/docXiaoqi">校企合作企业状态</a></li>
                                <li><a href="/docQita">其他企业状况</a></li>
                                <li><a href="/docGongwu">公务员</a></li>
                                <li><a href="/docYanjiu">研究生</a></li>
                                <li><a href="/docWatting">待业人员管理</a></li>
                            </ul>
                        </li>
                        <li class="nav-item"><a href="/messageUi"><i class="mdi mdi-hexagon-multiple"></i> 消息推送管理</a>
                        </li>
                    </ul>
                </nav>

            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="aside-toggler">
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 后台首页 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" th:src="${srcBase}" alt="管理员"/>
                                <span th:text="${aiName}"> <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="/information"><i class="mdi mdi-account"></i> 个人信息</a></li>
                                <li><a href="/changePwd"><i class="mdi mdi-lock-outline"></i> 修改密码</a></li>
                                <li><a href="/homePage"><i class="mdi mdi-delete"></i> 返回首页</a></li>
                                <li class="divider"></li>
                                <li><a href="pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a></li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-primary">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">就业总数</p>
                                    <p class="h3 text-white m-b-0" th:text="${workers}"></p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account-check"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-danger">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">学生总数</p>
                                    <p class="h3 text-white m-b-0" th:text="${persons}"></p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account-multiple"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-success">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">今日就业人数</p>
                                    <p class="h3 text-white m-b-0" th:text="${todayS}"></p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account-plus"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-purple">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">从公读研人数</p>
                                    <p class="h3 text-white m-b-0" th:text="${numbers}"></p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account-star"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>各学院就业统计</h4>
                            </div>
                            <div class="card-body">
                                <canvas class="js-chartjs-bars"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>近七日就业人数统计</h4>
                            </div>
                            <div class="card-body">
                                <canvas class="js-chartjs-lines"></canvas>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>合作企业就业信息</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>企业名称</th>
                                            <th>招收名额</th>
                                            <th>已招名额</th>
                                            <th>招聘状态</th>
                                            <th>满员进度</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="com:${Company}">
                                            <td th:text="${com.getComNumber()}"></td>
                                            <td th:text="${com.getCompany()}"></td>
                                            <td th:text="${com.getComPerson()}"></td>
                                            <td th:text="${com.getComPered()}"></td>
                                            <td th:inline="text"><span th:class="${com.getComStatusP()}">[[${com.getComStatus()}]]</span>
                                            </td>
                                            <td>
                                                <div class="progress progress-striped progress-sm">
                                                    <div class="progress-bar progress-bar-warning"
                                                         th:style="${com.getComChart()}"></div>
                                                </div>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>

<!--图表插件-->
<script type="text/javascript" src="static/js/Chart.js"></script>
<script type="text/javascript">

    $.ajax({
        url: basePath + "/chart",
        contentType: "application/json;charset=UTF-8",
        type: "post",
        dataType: "json",
        success: function (data) {

            let cols = [];
            let colPerson = [];
            let dataTi = [];
            let dataPerson = [];

            for (let i = 0; i < data.length; i++) {
                if (data[i].colleges != null) {
                    cols[i] = data[i].colleges;
                    colPerson[i] = data[i].persons;
                }
            }
            for (let i = 0; i < data.length; i++) {
                if (data[i].date != null) {
                    dataTi[i] = data[i].date;
                    dataPerson[i] = data[i].personsD;
                }
            }
            dataTi = dataTi.filter(Boolean);
            dataPerson = dataPerson.filter(Boolean);

            $(document).ready(function (e) {
                var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d'),
                    $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');

                var $dashChartBarsData = {
                    labels: cols,
                    datasets: [
                        {
                            label: '就业人数',
                            borderWidth: 1,
                            borderColor: 'rgba(0,0,0,0)',
                            backgroundColor: 'rgba(51,202,185,0.5)',
                            hoverBackgroundColor: "rgba(51,202,185,0.7)",
                            hoverBorderColor: "rgba(0,0,0,0)",
                            data: colPerson
                        }
                    ]
                };


                var $dashChartLinesData = {
                    labels: dataTi,
                    datasets: [
                        {
                            label: '就业人数',
                            data: dataPerson,
                            borderColor: '#358ed7',
                            backgroundColor: 'rgba(53, 142, 215, 0.175)',
                            borderWidth: 1,
                            fill: false,
                            lineTension: 0.5
                        }
                    ]
                };

                new Chart($dashChartBarsCnt, {
                    type: 'bar',
                    data: $dashChartBarsData
                });

                var myLineChart = new Chart($dashChartLinesCnt, {
                    type: 'line',
                    data: $dashChartLinesData,
                });
            });

        },
        error: function () {

        }
    })
</script>
</body>
</html>